<template>
  <div :style="{ fontSize:fontSize + 'px'}">
    <v-header :title="$route.meta.title"></v-header>
    <div class="content">
      <div class="searchbar-box">
        <v-searchbar
          v-model="keyCode"></v-searchbar>
      </div>
      <div v-show="keyCode !== ''">
        <div class="searchTip">
          搜索到与“<a>{{keyCode}}</a>”相关{{findLen}}条内容:
        </div>
        <div v-for="helpDocItem in $config.helpDoc.helpDoc">
          <v-accordion
            height="2.25em"
            v-for="(item, idx) in helpDocItem"
            v-on:open="openSearchAccordion(item, idx)"
            :isOpen="item.isActive"
            :description="item.title"
            v-show="item.isShow"
            :choice="item.content"
            :key="idx">
          </v-accordion>
        </div>
      </div>
      <div v-show="keyCode === ''" class="bottom-content">
        <v-sliderbar
          v-on:onClick="selectedCard"
          class="navigotar"
          :height="scrollBarHeight"
          :data="navigotar"></v-sliderbar>
        <div ref="helpdoc" class="helpdoc" :style="{ height: height + 'px' }">
        <v-accordion
          height="2.25em"
          v-for="(item, idx) in helpDoc"
          @open="openAccordion(idx, item)"
          @preview="preview"
          @clientTop="clientTop"
          :isOpen="item.isActive"
          :description="item.title"
          :choice="item.content"
          :key="idx">
        </v-accordion>
        <div v-if="helpDoc === undefined" class="callus">
          <div class="top" style="border-bottom: 2px solid #EDF1F5;padding-bottom: 19px">
            <div class="top_top">
              <h2 style="font-size: 1.5em;font-weight: 500">宽策略证券</h2>
              <div>
                <h4>
                  <p style="margin-bottom: 1em">周一到周五</p>
                  <p>9:30 - 18:30</p>
                </h4>
                <h4></h4>
              </div>
            </div>
            <div class="top_bottom">
              <a href="tel:400-900-6687">
              <h2 style="margin-bottom: -2em;font-weight: 500">400-900-6687</h2>
              </a>
              <a href="tel:021-5422-2273"><h2 style="font-weight: 500">
                021-5422-2273
              </h2></a>
            </div>
          </div>
          <div class="bottom" style="margin-top: 10%">
            <div class="bottom_top">
              <h3 style="color: #FF1633;width: 100%;font-weight: 500;position: relative;">
                美国盈透证券
              </h3>
              <h3 style="margin-top: -0.5em;color: black">Interactive Brokers</h3>
              <h3 style="margin-bottom: -0.5em">周一至周五</h3>
              <h3>9:00 - 18:00</h3>
            </div>
            <div class="bottom_bottom">
              <a href="tel:021-60868586">
                <h3 style="margin-bottom: -2em;font-weight: 500;font-size: 1.4em">021-60868586(上海)</h3>
              </a>
              <a href="tel:852-21567907">
                <h3 style="font-weight: 500;font-size: 1.4em">852-21567907(香港)</h3>
              </a>
            </div>
          </div>
        </div>
        </div>
      </div>
    </div>
    <div v-transfer-dom>
      <previewer :list="helpDocImglist" ref="previewer" :options="options"></previewer>
    </div>
  </div>
</template>

<script>
  import { Scroller, Previewer, TransferDom } from 'vux'

  export default {
    name: 'help',
    directives: {
      TransferDom
    },
    components: {
      Scroller,
      Previewer
    },
    data () {
      return {
        fontSize: 12,
        helpDocImglist: [

        ],
        navigotar: this.$config.helpDoc.navigotar,
        helpDoc: this.$config.helpDoc.helpDoc['kaihuzhinan'],
        keyCode: '',
        findLen: 0,
        height: 368,
        scrollBarHeight: '768px',
        options: {
          getThumbBoundsFn (index) {
            // find thumbnail element
            let thumbnail = document.querySelectorAll('.previewer-demo-img')[index]
            // get window scroll Y
            let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
            // optionally get horizontal scroll
            // get position of element relative to viewport
            let rect = thumbnail.getBoundingClientRect()
            // w = width
            return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
            // Good guide on how to get element coordinates:
            // http://javascript.info/tutorial/coordinates
          }
        }
      }
    },
    watch: {
      keyCode: function () {
        this.findDocByKeyCode()
      }
    },
    methods: {
      selectedCard (idx) {
        for (let i in this.navigotar) {
          this.navigotar[i].isActive = false
        }
        this.navigotar[idx].isActive = true
        this.helpDoc = this.$config.helpDoc.helpDoc[this.$config.helpDoc.navigotar[idx].id]
        this.helpDoc.forEach((item, idx) => {
          item.isActive = false
        })
      },
      preview (idx) {
        this.$refs.previewer.show(idx)
      },
      openSearchAccordion (item, idx) {
        if (item.isActive) {
          item.isActive = false
          return
        }
        this.loopPrototype('isActive')
        item.isActive = true
      },
      openAccordion (idx, item) {
        if (this.helpDoc[idx].isActive) {
          this.helpDoc[idx].isActive = false
          return
        }
        for (let i in this.helpDoc) {
          this.helpDoc[i].isActive = false
        }
        this.helpDoc[idx].isActive = true
        this.helpDocImglist = []
        if (typeof item.content === 'object') {
          item.content.forEach((arr, idx) => {
            if (/image[0-9].*/g.test(arr)) this.helpDocImglist.push({ src: require('../../assets/img/helpDoc/' + arr) })
          })
        }
      },
      clientTop (e) {
        setTimeout(() => {
          this.$refs.helpdoc.scrollTop = e.target.offsetTop - 70 - (3.33 * this.fontSize)
        }, 300)
      },
      findDocByKeyCode (keyCode) {
        this.loopPrototype('isShow')
        this.findLen = 0
        for (let i in this.$config.helpDoc.helpDoc) {
          this.$config.helpDoc.helpDoc[i].forEach((item, idx) => {
            if (item.title.indexOf(this.keyCode) > -1) {
              item.isShow = true
              this.findLen++
            }
          })
        }
      },
      loopPrototype (prototype) {
        for (let i in this.$config.helpDoc.helpDoc) {
          this.$config.helpDoc.helpDoc[i].forEach((item, idx) => {
            item[prototype] = false
          })
        }
      },
    },
    created () {
      this.fontSize = this.fontSize * document.body.offsetWidth / 320
      this.loopPrototype()
      this.height = document.body.offsetHeight - 61 - 3.33 * this.fontSize
      this.scrollBarHeight = -(61 + this.fontSize * 3.33) + 'px'
    }
  }
</script>

<style lang="less" scoped>
.callus {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  height: 90%;
  margin-top: 10%;
  * {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }
  .top {
    .top_top {

    }
    .top_bottom {

    }
  }
  .bottom {
    display: flex;
    flex: 1;
    img {
      height: 2em;
      width: 1em;
    }
  }
}
.searchbar-box {
  height: 3.33em;
  background: #EDF1F5;
  padding-top: 61px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bottom-content {
  flex: 1;
  display: flex;
  .navigotar {
    flex: 1;
  }
  .helpdoc {
    flex:5;
    width: 30%;
    overflow: scroll;
  }
}
.helpdoc {

}
.searchTip {
  font-size: 1.2em;
  display: flex;
  align-items: flex-end;
  color: #666;
  font-weight: 500;
  height: 2em;
  padding: 0.9em 3%;
  background: #EDF1F5;
  a {
    color: #546BFF;
    font-size: 1em;
  }
}
</style>